<template>
    <t-dialog :visible="dialogVisible" size="normal" @dialog-close="cancel">
      <div slot="title" class="app-service-center-content-charter-update-dialog__title">{{ dialogTitle }}</div>
      <div slot="content" class="app-service-center-content-charter-update-dialog__content">
        <div class="app-service-center-content-charter-update-dialog__content__lpart">
          <div class="app-service-center-content-charter-update-dialog__content__lpart__info">
            <div class="app-service-center-content-charter-update-dialog__content__lpart__info__title">用户个人信息</div>
            <div class="app-service-center-content-charter-update-dialog__content__lpart__info__table">
              <t-table :items="currentItemOtherAttrubutes" size="mini" type="blue" border stripe>
                <t-table-column label="相关属性" prop="id" width="3"></t-table-column>
                <t-table-column label="属性值" prop="content" width="5"></t-table-column>
              </t-table>
            </div>
            <div v-if="$stateHub.rolename!= 'COUNTER_EMPLOYEE'" class="app-service-center-content-charter-update-dialog__content__lpart__info">
              <div class="app-service-center-content-charter-update-dialog__content__lpart__info__title">授信评分：</div>
              <el-input
                placeholder=""
                v-model="currentInputLevel"
              :disabled="true">
              </el-input>
            </div>
            <div class="app-service-center-content-charter-update-dialog__content__lpart__info">
              <div class="app-service-center-content-charter-update-dialog__content__lpart__info__title">期望贷款：</div>
              <el-input
                placeholder=""
                v-model="currentInputExpectedLoan"
              :disabled="true">
              </el-input>
            </div>
           </div>
        </div>
        <div class="app-service-center-content-charter-update-dialog__content__rpart">
       	  <div class="app-service-center-content-charter-update-dialog__content__rpart__name">
            <div class="app-service-center-content-charter-update-dialog__content__rpart__name__title">房产信息</div>
            <div class="app-service-center-content-charter-update-dialog__content__rpart__name__value">  
              <t-textarea :autosize="propertyAutosize" :value="currentInputProperty" :focus="true" @input="handleCurrentInputProperty"></t-textarea>    
            </div>
          </div>
          <div class="app-service-center-content-charter-update-dialog__content__rpart__synopsis">
            <div class="app-service-center-content-charter-update-dialog__content__rpart__synopsis__title">银行存款信息</div>
            <div class="app-service-center-content-charter-update-dialog__content__rpart__synopsis__value">
              <t-textarea :autosize="depositAutosize" :value="currentInputDeposit" @input="handleCurrentInputDeposit"></t-textarea>              
            </div>
          </div>
          <div class="app-service-center-content-charter-update-dialog__content__rpart__synopsis">
            <div class="app-service-center-content-charter-update-dialog__content__rpart__synopsis__title">金融理财信息</div>
            <div class="app-service-center-content-charter-update-dialog__content__rpart__synopsis__value">
              <t-textarea :autosize="financialAutosize" :value="currentInputFinancial" @input="handleCurrentInputFinancial"></t-textarea>              
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" style="text-align: right;">
        <el-upload class="upload-demo" :action="uploadVideo" v-if="$stateHub.rolename === 'COUNTER_EMPLOYEE' && store.current.item && !(store.current.item.state === '待录入' || store.current.item.state == '已驳回')" :data={id:userid} multiple :limit="3" :on-success="onVideoUploadSuccess" :with-credentials="true" :disabled="true">
          <t-button size="normal" type="update" disabled>上传视频</t-button>
        </el-upload>
        <el-upload class="upload-demo" :action="uploadVideo" v-if="$stateHub.rolename === 'COUNTER_EMPLOYEE' && store.current.item && (store.current.item.state === '待录入' || store.current.item.state == '已驳回')"  :data={id:userid} multiple :limit="3" :on-success="onVideoUploadSuccess" :with-credentials="true">
          <t-button size="normal" type="update">上传视频</t-button>
        </el-upload>
        <t-button v-if="$stateHub.rolename === 'COUNTER_EMPLOYEE' && store.current.item && !(store.current.item.state === '待录入' || store.current.item.state == '已驳回')" size="normal" type="update" @click="updateItem" disabled>更新</t-button>
        <t-button v-if="$stateHub.rolename === 'COUNTER_EMPLOYEE' && store.current.item && (store.current.item.state === '待录入' || store.current.item.state == '已驳回')" size="normal" type="update" @click="updateItem">更新</t-button>
        <t-button v-if="$stateHub.rolename === 'COUNTER_EMPLOYEE' && store.current.item && !(store.current.item.state === '待录入' || store.current.item.state == '已驳回')" size="normal" type="delete" @click="deleteItem" disabled>删除</t-button>
        <t-button v-if="$stateHub.rolename === 'COUNTER_EMPLOYEE' && store.current.item && (store.current.item.state === '待录入' || store.current.item.state == '已驳回')" size="normal" type="delete" @click="deleteItem">删除</t-button>
        <t-button v-if="$stateHub.rolename === 'COUNTER_EMPLOYEE'" size="normal" type="primary" @click="cancel">退出</t-button>
      </div>
    </t-dialog>
</template>

<script>
  import TDialog from '@/components/dialog';
  import TButton from '@/components/button';
  import TInput from '@/components/input';
  import TTextarea from '@/components/textarea';
  import TTable from '@/components/table';
  import TTableColumn from '@/components/table/table-column';
  
  export default {
    name: 'app-service-center-content-charter-update-dialog',
    props: {
      store: {
        type: Object,
        required: true,
      },
    },
    components: {
      TButton,
      TInput,
      TTextarea,
      TTable,
      TTableColumn,
      TDialog,
    },
    data() {
      return {
        level: '',
        userid: '',
        propertyAutosize: {
          minRows: 3,
          maxRows: 3,
        },
        depositAutosize: {
          minRows: 3,
          maxRows: 3,
        },
        financialAutosize: {
          minRows: 3,
          maxRows: 3,
        },
      };
    },
    computed: {
      uploadVideo() {
        let url = '';
        if (process.env.NODE_ENV === 'development') {
          url = 'http://127.0.0.1:8050/api/user-infos/uploadVideo';
        } else {
          url = 'https://www.todaytomato.com:8050/api/user-infos/uploadVideo';
        }
        return url;
      },
      currentItemOtherAttrubutes() {
        if (this.store.current.item === null) return [];
        let attrs = [];
        this.userid = this.store.current.item.id;
        attrs.push({ createDate: '用户编号', createDateVal: this.store.current.item.cusId });
        attrs.push({ createDate: '用户姓名', createDateVal: this.store.current.item.name });
        attrs.push({ createDate: '用户性别', createDateVal: this.store.current.item.sex });
        attrs.push({ createDate: '用户年龄', createDateVal: this.store.current.item.age });
        attrs.push({ createDate: '用户身份证', createDateVal: this.store.current.item.idCardNumber });
        attrs = attrs.reverse();
        return attrs;
      },
      currentInputProperty() {
        return this.store.current.input.property;
      },
      currentInputDeposit() {
        return this.store.current.input.deposit;
      },
      currentInputLevel() {
        return this.store.current.input.level;
      },
      currentInputExpectedLoan() {
        const reg2 = /(?!^)(?=(\d{3})+$)/g;
        return this.store.current.input.expectedLoan.replace(reg2, ',');
      },
      currentInputFinancial() {
        return this.store.current.input.financial;
      },
      dialogTitle() {
        return this.store.updateDialog.title;
      },
      dialogVisible() {
        return this.store.updateDialog.visible;
      },
    },
    methods: {
      onVideoUploadSuccess() {
        this.$emit('close');
        this.$noticeHub.success({ message: '视频上传成功', description: '请进行下一步操作！', duration: 1800 });
      },
      handleCurrentInputProperty(val) {
        this.store.current.input.property = val;
      },
      handleCurrentInputDeposit(val) {
        this.store.current.input.deposit = val;
      },
      handleCurrentInputFinancial(val) {
        this.store.current.input.financial = val;
      },
      cancel() {
        this.$emit('close');
      },
      deleteItem() {
        const id = this.store.current.item.id;
        const target = `api/user-infos/${id}/delete`;
        this.$http.request({
          url: target,
          method: 'post',
        }).then((response) => {
          this.store.charters = [];
          Object.values(response.data).forEach((item) => {
            this.store.charters.push({
              cusId: item.cusId,
              name: item.name,
              sex: item.sex,
              age: item.age,
              state: item.state,
              idCardNumber: item.idCardNumber,
              property: item.property,
              deposit: item.deposit,
              financial: item.financial,
              id: item.id,
              level: item.level,
              expectedLoan: item.expectedLoan,
            });
          });
          this.$emit('close');
        }).catch(() => {
        });
      },
      uploadItem() {
      },
      updateItem() {
        const id = this.store.current.item.id;
        const property = this.store.current.input.property;
        const deposit = this.store.current.input.deposit;
        const financial = this.store.current.input.financial;
        const target = `api/user-infos/${id}/update`;
        this.$http.request({
          url: target,
          method: 'post',
          data: {
            property,
            deposit,
            financial,
          },
          transformRequest: [(data) => {
            const encodeProperty = encodeURIComponent(data.property);
            const encodeDeposit = encodeURIComponent(data.deposit);
            const encodeFinancial = encodeURIComponent(data.financial);
            return `property=${encodeProperty}&deposit=${encodeDeposit}&financial=${encodeFinancial}`;
          }],
        }).then((response) => {
          this.store.charters = [];
          Object.values(response.data).forEach((item) => {
            this.store.charters.push({
              cusId: item.cusId,
              name: item.name,
              sex: item.sex,
              age: item.age,
              state: item.state,
              idCardNumber: item.idCardNumber,
              property: item.property,
              deposit: item.deposit,
              financial: item.financial,
              id: item.id,
              level: item.level,
              expectedLoan: item.expectedLoan,
            });
          });
          this.$emit('close');
        }).catch(() => {
        });
      },
    },
  };
</script>
<style>
.upload-demo {
	display: inline-block;
}
</style>
